<template>
    <div class="approval-detail">
        <el-row class='detail'>
            <el-col :span="7">
                <div class="detail-left">
                    <el-card class="box-card" style="margin-right: 8px;margin-bottom: 8px;">
                        <div class='title'>
                            {{$t('approvalDetail.personal')}}
                        </div>
                        <div class="detail-info">
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.realName')}}:</span>
                                <span>{{info.realName}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.phoneNo')}}:</span>
                                <span>{{info.phoneNo}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.cardNum')}}:</span>
                                <span>{{info.cardNum}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.customerCrtTime')}}:</span>
                                <span>{{info.customerCrtTime}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.certifiedCity')}}:</span>
                                <span>{{info.idCardAddress}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.certifiedDate')}}:</span>
                                <span>{{info.birthday}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.authMsg')}}:</span>
                                <span>{{info.authMsg}}<a href="javascript:void(0);" class="results" @click="seeResult">{{$t('approvalDetail.see')}}</a></span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.bankCards')}}:</span>
                                <span v-show="info.cardExist === 1" style="color: red;">{{info.bankCard}}</span>
                                <span v-show="info.cardExist === 0" style="color: #8a8a8c;">{{info.bankCard}}</span>
                            </div>
                            <div class='detail-info-item continue'>
                                <span>{{$t('approvalDetail.continue')}}:</span>
                                <span>{{this.continue}}</span>
                                <button type='button' v-show="this.continue === '是'" @click="loanHistory = true">{{$t('approvalDetail.seehis')}}</button>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.percent')}}:</span>
                                <span>{{this.percent}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.regGps')}}:</span>
                                <span>{{url.address1}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.subGps')}}:</span>
                                <span>{{url.address2}}</span>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="box-card" style="margin-right: 8px;margin-bottom: 8px;">
                        <div class='title'>
                            {{$t('approvalDetail.business')}}
                        </div>
                        <div class="detail-info">
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.orderId')}}:</span>
                                <span>{{info.orderId}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.proName')}}:</span>
                                <span>{{info.proName}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.applyAmt')}}:</span>
                                <span>{{info.applyAmt}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.crtTime')}}:</span>
                                <span>{{info.crtTime}}</span>
                            </div>
                            <div class='detail-info-item'>
                                <span>{{$t('approvalDetail.proTerm')}}:</span>
                                <span>{{info.proTerm}}</span>
                            </div>
                        </div>
                    </el-card>
                    <!--<el-card class="box-card" style="margin-right: 8px;margin-bottom: 8px;">
                        <div class='title'>
                            {{$t('approvalDetail.riskReport')}}
                        </div>
                        <div class="risk-report">
                            <button @click="seeRiskReport">{{$t('approvalDetail.hitsee')}}</button>
                        </div>
                    </el-card>-->
                </div>
            </el-col>
            <el-col :span="17">
                <div class="detail-right">
                    <el-card class="box-card" style="margin-bottom: 8px;">
                        <div class='title'>
                            {{$t('approvalDetail.urgent')}}
                        </div>
                        <div class='contact-list'>
                            <el-table
                                :data="urgentContact"
                                style="width: 100%;font-size: 12px;"
                                border
                                stripe
                                >
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="contactsName"
                                    :label="$t('approvalDetail.contactsName')">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="mobile"
                                    :label="$t('approvalDetail.mobile')">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="relation"
                                    :label="$t('approvalDetail.relation')">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="addressBookStatus"
                                    :label="$t('approvalDetail.addressBookStatus')">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.addressBookStatus=== 1">{{$t('approvalDetail.pass')}}</span>
                                        <span v-if="scope.row.addressBookStatus=== 2">{{$t('approvalDetail.nopass')}}</span>
                                    </template> 
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="checkStatus"
                                    :label="$t('approvalDetail.checkStatus')"
                                    show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.checkStatus=== 2" >{{$t('approvalDetail.nohit')}}</span>
                                        <span v-if="scope.row.checkStatus=== 1" class="hit">
                                            {{$t('approvalDetail.hit')}}
                                            <a href="javascript:void(0)" @click="lookUp(scope.row)">{{$t('approvalDetail.hitsee')}}> </a>
                                        </span>
                                    </template> 
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                    <el-card class="box-card" style="margin-bottom: 8px;">
                        <div class='title'>
                            {{$t('approvalDetail.idcard')}}
                        </div>
                        <div class="id-photo">
                            <div id="image">
                                <div v-for="(item, index) in img1" :key="index">
                                    <img :src="item.imagePathUrl" alt="">
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="box-card" style="margin-bottom: 8px;">
                        <div class='title'>
                            {{$t('approvalDetail.auth')}}
                        </div>
                        <div class="basic">
                            <div class="basic-title">
                                {{$t('approvalDetail.personal')}}
                            </div>
                            <el-table
                                :data="perInfo"
                                style="width: 100%;font-size: 12px;"
                                border
                                stripe
                                >
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="birthday"
                                    :label="$t('approvalDetail.birthday')"
                                    width="110">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="education"
                                    :label="$t('approvalDetail.education')"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="religious"
                                    :label="$t('approvalDetail.religious')"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="marriage"
                                    :label="$t('approvalDetail.marriage')"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="familyNum"
                                    :label="$t('approvalDetail.familyNum')"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="sonsNum"
                                    :label="$t('approvalDetail.sonsNum')"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="motherName"
                                    :label="$t('approvalDetail.motherName')"
                                    width="130">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="familyAddress"
                                    :label="$t('approvalDetail.familyAddress')"
                                    width="220"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="basic">
                            <div class="basic-title">
                                {{$t('approvalDetail.work')}}
                            </div>
                            <el-table
                                :data="perInfo"
                                style="width: 100%;font-size: 12px;"
                                border
                                stripe
                                >
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="salary"
                                    :label="$t('approvalDetail.salary')"
                                    width="160">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="jobName"
                                    :label="$t('approvalDetail.jobName')"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="workYears"
                                    :label="$t('approvalDetail.workYears')"
                                    width="120">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="companyName"
                                    :label="$t('approvalDetail.companyName')"
                                    width="220"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="companyTel"
                                    :label="$t('approvalDetail.companyTel')"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="companyNet"
                                    :label="$t('approvalDetail.companyNet')"
                                    width="100">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="companyAddress"
                                    :label="$t('approvalDetail.companyAddress')"
                                    width="220"
                                    show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="basic">
                            <div class="basic-title">
                                {{$t('approvalDetail.option')}}
                            </div>
                            <div class="optional">
                                <div class="optional-item">
                                    <div>
                                        <span>{{$t('approvalDetail.que1')}}</span>
                                        <span>
                                            {{$t('approvalDetail.amount')}}
                                        </span>
                                    </div>
                                    <div style="text-align: left;">
                                        <span>{{$t('approvalDetail.answer')}}</span>
                                        <span>
                                            {{authentication.problem1}}
                                        </span>
                                    </div>
                                </div>
                                <div class="optional-item">
                                    <div>
                                        <span>{{$t('approvalDetail.que2')}}</span>
                                        <span>
                                            {{$t('approvalDetail.doing')}}
                                        </span>
                                    </div>
                                    <div>
                                        <span>{{$t('approvalDetail.answer')}}</span>
                                        <span>
                                            {{authentication.problem2}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="basic">
                            <div class="basic-title">
                                {{$t('approvalDetail.supp')}}
                            </div>
                            <div class="id-photo">
                                <div id="image2">
                                    <div v-for="(item, index) in img2" :key="index">
                                        <img :src="item.imagePathUrl" alt="">
                                        <div>
                                            <span v-if="item.imageType === 3">{{$t('approvalDetail.imageType3')}}</span>
                                            <span v-if="item.imageType === 4">{{$t('approvalDetail.imageType4')}}</span>
                                            <span v-if="item.imageType === 5">{{$t('approvalDetail.imageType5')}}</span>
                                            <span v-if="item.imageType === 6">{{$t('approvalDetail.imageType6')}}</span>
                                            <span v-if="item.imageType === 7">{{$t('approvalDetail.imageType7')}}</span>
                                            <span v-if="item.imageType === 8">{{$t('approvalDetail.imageType8')}}</span>
                                            <span v-if="item.imageType === 9">{{$t('approvalDetail.imageType9')}}</span>
                                            <span v-if="item.imageType === 10">{{$t('approvalDetail.imageType10')}}</span>
                                            <span v-if="item.imageType === 11">{{$t('approvalDetail.imageType11')}}</span>
                                            <span v-if="item.imageType === 12">{{$t('approvalDetail.imageType12')}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="basic">
                            <div class="basic-title">
                                {{$t('approvalDetail.equip')}}
                            </div>
                            <el-table
                                :data="equipment"
                                style="width: 100%;font-size: 12px;"
                                border
                                stripe
                                >
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="phoneName"
                                    :label="$t('approvalDetail.phoneName')">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="androidVersion"
                                    :label="$t('approvalDetail.andVersion')">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="installDate"
                                    :label="$t('approvalDetail.insDate')">
                                </el-table-column>
                                <el-table-column
                                    header-align="center"
                                    align="center"
                                    prop="appVersion"
                                    :label="$t('approvalDetail.appVersion')">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                    <el-card class="box-card" style="margin-bottom: 8px;">
                        <div class='title'>
                            {{$t('approvalDetail.view')}}
                        </div>
                        <el-form class='personal-opinion' :model="ruleForm" label-width="100px" :rules="rules" ref="ruleForm" size="mini" style="width: 80%;">
                            <el-form-item :label="$t('approvalDetail.elenuc')">
                                <el-select v-model='ruleForm.telStatus' :placeholder="$t('rule.choose')" size='small' style="width: 200px;" :disabled="true">
                                    <el-option
                                    v-for='item in electric'
                                    :key='item.value'
                                    :label='item.label'
                                    :value='item.value'>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <div class="elec">{{$t('approvalDetail.elenucStatus')}}</div>
                            <div>
                                <div style="display: flex;justify-content: space-between;">
                                    <el-form-item :label="$t('approvalDetail.oneself')">
                                        <el-select v-model="ruleForm.myselfTelStatus" :placeholder="$t('rule.choose')" size='small' style="width: 100%;" :disabled="true">
                                            <el-option :label="$t('approvalDetail.oneself1')" value="1"></el-option>
                                            <el-option :label="$t('approvalDetail.oneself2')" value="2"></el-option>
                                            <el-option :label="$t('approvalDetail.oneself3')" value="3"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('approvalDetail.oneselfMobile')" >
                                        <el-input v-model="ruleForm.myselfMobile" style="width: 100%;" size='small' :disabled="true"></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item :label="$t('grouping.remark')" v-show="isRemark1">
                                    <el-input type='textarea' size='small' v-model='ruleForm.myselfCheckRemarks' :placeholder="$t('rule.toLength')" :maxlength="500" :disabled="true"></el-input>
                                </el-form-item>
                                <div style="display: flex;justify-content: space-between;">
                                    <el-form-item :label="$t('approvalDetail.contact1TelStatus')">
                                        <el-select v-model="ruleForm.contact1TelStatus" :placeholder="$t('rule.choose')" style="width: 100%;" size='small' :disabled="true">
                                            <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                                            <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('approvalDetail.contact1Mobile')">
                                        <el-input v-model="ruleForm.contact1Mobile" style="width: 100%;" size='small' :disabled="true"></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item :label="$t('grouping.remark')" v-show="isRemark2">
                                    <el-input type='textarea' size='small' v-model='ruleForm.contact1CheckRemarks' :placeholder="$t('rule.toLength')" :maxlength="500" :disabled="true"></el-input>
                                </el-form-item>
                                <div style="display: flex;justify-content: space-between;">
                                    <el-form-item :label="$t('approvalDetail.contact2TelStatus')">
                                        <el-select v-model="ruleForm.contact2TelStatus" :placeholder="$t('rule.choose')" style="width: 100%;" size='small' :disabled="true">
                                            <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                                            <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('approvalDetail.contact2Mobile')" >
                                        <el-input v-model="ruleForm.contact2Mobile" style="width: 100%;" size='small' :disabled="true"></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item :label="$t('grouping.remark')" v-show="isRemark3">
                                    <el-input type='textarea' size='small' v-model='ruleForm.contact2CheckRemarks' :placeholder="$t('rule.toLength')" :maxlength="500" :disabled="true"></el-input>
                                </el-form-item>
                                <div style="display: flex;justify-content: space-between;">
                                    <el-form-item :label="$t('approvalDetail.jobTelStatus')">
                                        <el-select v-model="ruleForm.jobTelStatus" :placeholder="$t('rule.choose')" style="width: 100%;" size='small' :disabled="true">
                                            <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                                            <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('approvalDetail.jobMobile')">
                                        <el-input v-model="ruleForm.jobMobile" style="width: 100%;" size='small' :disabled="true"></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item :label="$t('grouping.remark')" v-show="isRemark4">
                                    <el-input type='textarea' size='small' v-model='ruleForm.jobCheckRemarks' :placeholder="$t('rule.toLength')" :maxlength="500" :disabled="true"></el-input>
                                </el-form-item>
                                <el-form-item label="SMS">
                                    <el-input type='textarea' size='small' v-model='ruleForm.sms' :placeholder="$t('rule.toLength')" :maxlength="500" :disabled="true"></el-input>
                                </el-form-item>
                                <el-form-item :label="$t('approvalDetail.alternateContact')">
                                    <el-input type='textarea' size='small' v-model='ruleForm.alternateContact' :placeholder="$t('rule.toLength')" :maxlength="500" :disabled="true"></el-input>
                                </el-form-item>
                            </div>
                            <el-form-item :label="$t('approvalDetail.result')">
                                <el-radio-group v-model='ruleForm.status' style="margin: 10px 0;" :disabled="true">
                                    <el-radio :label="$t('approvalDetail.adopt')" size='mini'></el-radio>
                                    <el-radio :label="$t('approvalDetail.refuse')" size='mini'></el-radio>
                                    <el-radio :label="$t('approvalDetail.derate')" size='mini'></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item :label="$t('approvalDetail.limit')" v-show="isQuota">
                                <el-input type="number" v-model='ruleForm.approvedAmt' size="small" style="width: 200px;" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('approvalDetail.remarks')">
                                <el-input type='textarea' size='small' v-model='ruleForm.checkOpinion' :placeholder="$t('rule.toLength')" :maxlength="500" :disabled="true"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="$t('approvalDetail.rlt')" :visible.sync="dialogTableVisible">
            <div class="custom-form">
                <div class="thead">
                    <div>{{$t('approvalDetail.rltname')}}</div>
                    <div>{{$t('approvalDetail.mobile')}}</div>
                    <div>{{$t('approvalDetail.relation')}}</div>
                    <div>{{$t('approvalDetail.loanstatus')}}</div>
                </div>
                <div class="tbody">
                    <div>{{gridData.contactsName}}</div>
                    <div>{{gridData.mobile}}</div>
                    <div>{{gridData.relation}}</div>
                    <div>{{gridData.status}}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogTableVisible = false">{{$t('btn.close')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('approvalDetail.loanhis')" :visible.sync="loanHistory">
            <div class="loan-info">
                <div class="loan-item">
                    <span>{{$t('approvalDetail.realName')}}:</span>
                    <span>{{info.realName}}</span>
                </div>
                <div class="loan-item">
                    <span>{{$t('approvalDetail.phoneNo')}}:</span>
                    <span>{{info.phoneNo}}</span>
                </div>
                <div class="loan-item">
                    <span>{{$t('approvalDetail.bankCards')}}:</span>
                    <span>{{info.bankCard}}</span>
                </div>
            </div>
            <el-table
                :data="historyTable"
                border
                stripe
                style="width: 100%">
                <el-table-column
                header-align="center"
                align="center"
                :label="$t('approvalDetail.num')"
                type="index"
                width="65">
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                :label="$t('approvalDetail.orderId')"
                width="200">
                <template slot-scope="scope">
                    <span class="href">{{scope.row.orderId}}</span>
                </template>
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                prop="proName"
                :label="$t('approvalDetail.proName')"
                width="200">
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                prop="crtTime"
                :label="$t('approvalDetail.crtTime')"
                width="200">
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                prop="lendDate"
                :label="$t('approvalDetail.loanTime')"
                width="200">
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                prop="applyAmt"
                :label="$t('approvalDetail.applyAmts')"
                width="200">
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                prop="neteceipts"
                :label="$t('approvalDetail.neteceipts')"
                width="200">
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                prop="lastPayDate"
                :label="$t('approvalDetail.lastPayDate')"
                width="200">
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                prop="realRepayDate"
                :label="$t('approvalDetail.realRepayDate')"
                width="200">
                </el-table-column>
                <el-table-column
                header-align="center"
                align="center"
                prop="status"
                :label="$t('approvalDetail.orderStatus')"
                width="200">
                <template slot-scope="scope">
                    <span v-if="scope.row.status=== 3">{{$t('approvalDetail.status1')}}</span>
                    <span v-if="scope.row.status=== 4">{{$t('approvalDetail.status2')}}</span>
                    <span v-if="scope.row.status=== 5">{{$t('approvalDetail.status3')}}</span>
                    <span v-if="scope.row.status=== 6">{{$t('approvalDetail.status4')}}</span>
                    <span v-if="scope.row.status=== 7">{{$t('approvalDetail.status5')}}</span>
                    <span v-if="scope.row.status=== 8">{{$t('approvalDetail.status6')}}</span>
                </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="loanHistory = false">{{$t('btn.close')}}</el-button>
            </span>
        </el-dialog>
        <!--<el-dialog
          :title="$t('approvalDetail.riskReport')"
          :visible.sync="centerDialogVisible"
          width="300px">
          <div class="report-center">
            <div class="riskImg">
                <img :src="riskReportData.url"/>
            </div>
            <div class="risk-data">
                <div class="risk-item">
                    <div>
                        <span class="hight">{{$t('approvalDetail.identity')}}：</span>
                        <span v-if="riskReportData.identity.idCheck === 0">{{$t('processing.fail')}}</span>
                        <span v-if="riskReportData.identity.idCheck === 1">{{$t('user.success')}}</span>
                    </div>
                    <div v-show="riskReportData.identity.idCheck === 0 ">
                        <span>{{$t('processing.callFailedReason')}}：</span>
                        <span>{{riskReportData.identity.reason}}</span>
                    </div>
                </div>
                <div class="risk-item">
                    <div>
                        <span class="hight">{{$t('approvalDetail.isBlacklist')}}：</span>
                        <span v-if="riskReportData.black.blCheck === 0">{{$t('approvalDetail.no')}}</span>
                        <span v-if="riskReportData.black.blCheck === 1">{{$t('approvalDetail.yes')}}</span>
                    </div>
                    <el-table
                    v-show="riskReportData.black.blCheck === 0"
                    :data="riskReportData.black.events"
                    stripe
                    style="width: 100%;margin: 3px 0;">
                        <el-table-column
                            prop="productType"
                            :label="$t('approvalDetail.otherPro')"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="eventTime"
                            :label="$t('approvalDetail.joinTime')"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="hitReason"
                            :label="$t('approvalDetail.hitReanson')"
                            show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="risk-item">
                    <div>
                        <span class="hight">{{$t('approvalDetail.paperSearch')}}：</span>
                        <span>{{riskReportData.teleId}}</span>
                    </div>
                </div>
                <div class="risk-item">
                    <div>
                        <span class="hight">{{$t('approvalDetail.multiPlatform')}}：</span>
                        <div v-for="(item, index) in riskReportData.mulSta" :key="index" style="text-indent: 2em;">
                            <span>{{item.timePeriod}}{{$t('processing.day')}}，{{$t('approvalDetail.visit')}}{{item.queryCount}}{{$t('approvalDetail.second')}}{{$t('reduDetail.refuse')}}</span>
                        </div>
                    </div>
                </div>
                <div class="risk-item">
                    <div>
                        <span class="hight">{{$t('approvalDetail.insPlatform')}}：</span>
                        <el-table
                        :data="riskReportData.mulRec"
                        stripe
                        style="width: 100%;margin: 3px 0;">
                            <el-table-column
                                prop="type"
                                :label="$t('department.type')"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="dates"
                                :label="$t('approvalDetail.riskTime')"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="count"
                                :label="$t('approvalDetail.frequency')"
                                show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="risk-item">
                    <div>
                        <span class="hight">{{$t('approvalDetail.creditScore')}}：</span>
                        <span>{{riskReportData.scoring}}</span>
                    </div>
                </div>
                <div class="risk-item">
                    <div>
                        <span class="hight">{{$t('approvalDetail.telScore')}}：</span>
                        <span>{{riskReportData.telSc}}</span>
                    </div>
                </div>
            </div>
          </div>
          <div class="dialog-footer" style="text-align: center;padding-top: 20px;">
            <el-button type="primary" @click="centerDialogVisible = false">{{$t('btn.confirm')}}</el-button>
          </div>
        </el-dialog>-->
    </div>
</template>

<script>
    import Viewer from 'viewerjs'
    import 'viewerjs/dist/viewer.css'
    import { mapGetters } from "vuex";
    import { getInfo, getContact, getHit, getImg, getCustomerInfo, getAppInfo, getApproInfo, getResultById, hisPage, getPercent, resolveGps, riskReport, telephoneCheck } from 'api/trust/approvalDetail/index';
    export default {
        data() {
            return {
                isRemark1: false,
                isRemark2: false,
                isRemark3: false,
                isRemark4: false,
                ruleForm: {
                    telStatus: '',
                    status: '',
                    approvedAmt: '',
                    checkOpinion: '',
                    myselfTelStatus: '',
                    myselfMobile: '',
                    myselfCheckRemarks: '',
                    contact1TelStatus: '',
                    contact1Mobile: '',
                    contact1CheckRemarks: '',
                    contact2TelStatus: '',
                    contact2Mobile: '',
                    contact2CheckRemarks: '',
                    jobTelStatus: '',
                    jobMobile: '',
                    jobCheckRemarks: '',
                    sms: '',
                    alternateContact: ''
                },
                rules: {
                    status1: [
                        { required: true, message: this.$t('approvalDetail.ruleEndResult'), trigger: 'change' }
                    ]
                },
                riskReportData: {
                    'url': '',
                    'identity': {
                        'reason': '',
                        'idCheck': ''
                    },
                    'black': {
                        'blCheck': '',
                        'events': [{
                            'productType': '',
                            'eventTime': '',
                            'hitReason': ''
                        }]
                    },
                    'teleId': '',
                    'mulSta': [{
                        'timePeriod': '',
                        'queryCount': ''
                    }, {
                        'timePeriod': '',
                        'queryCount': ''
                    }],
                    'mulRec': [{
                        'count': '',
                        'dates': '',
                        'type': ''
                    }],
                    'scoring': '',
                    'telSc': ''
                },
                centerDialogVisible: false,
                url: {
                    address1: '',
                    address2: ''
                },
                percent: '',
                historyTable: [{
                    orderId: '',//业务ID
                    proName: '',//产品名称
                    crtTime: '',//申请时间
                    lendDate: '',//放款时间
                    applyAmt: '',//审批金额
                    neteceipts: '',//放款金额
                    lastPayDate: '',//到期时间
                    realRepayDate: '',//还款时间
                    status: ''//订单状态
                }],
                loanHistory: false,
                continue: '',
                imgList: [],
                img1: [],
                img2: [],
                info: {
                    "realName": "",//客户姓名
                    "phoneNo": "",//客户手机号
                    "cardNum": "",//身份证卡号
                    "customerCrtTime": "",//个人信息注册时间
                    "orderId": "",//业务ID
                    "proName": "",//产品名称
                    "applyAmt": "",//申请金额
                    "crtTime": "",//申请时间
                    "proTerm": ""//申请期限
                },
                certifiedCity: "",
                certifiedDate: "",
                certifiedResult: "",
                urgentContact: [],
                dialogTableVisible: false,
                gridData: {
                    contactsName: '',
                    mobile: '',
                    relation: '',
                    status: '',
                },
                hse: this.$t('approvalDetail.noobtain'),
                equipment: [],
                isQuota: false,
                isQuota1: false,
                electric: [
                    {
                    value: 1,
                    label: this.$t('approvalDetail.yes')
                    },
                    {
                    value: 2,
                    label: this.$t('approvalDetail.no')
                    }
                ],
                orderId: null,
                imgQuery: {
                    userId: null,
                    channel: null
                },
                authentication: {
                    problem1: '',
                    problem2: '',
                },
                perInfo: [],
                dialogVisible: false,
                userId: '',
                realName: '',
                lanStatus: null,
                listObj: {}
            }
        },
        created() {
            if (this.language === 'zh') {
                this.lanStatus = 1;
            } else if (this.language === 'en') {
                this.lanStatus = 2;
            } else {
                this.lanStatus = 3;
            }
            this.getParamsDetail()
            //GPS
            let gps = {};
            gps.orderId = this.orderId;
            gps.userUUID = this.listObj.userUUID;
            resolveGps(gps)
            .then(response => {
                response.data.gpsList.forEach(item => {
                    if(item.saveType === '1') {
                        this.url.address1 = item.address
                    } else if(item.saveType === '2') {
                        this.url.address2 = item.address
                    }
                })
            })
            //历史记录
            let hisObj = {};
            hisObj.orderId = this.orderId;
            hisObj.userUUID = this.listObj.userUUID;
            hisPage(hisObj)
            .then(response => {
                this.historyTable = response.data;
            })
            //个人信息 业务审批信息
            let per = {};
            per.orderId = this.orderId
            per.userUUID = this.listObj.userUUID;
            getInfo(per)
            .then(response => {
                let re = /(?=(?!\b)(\d{3})+$)/g;
                let str = String(response.data.applyAmt)
                response.data.applyAmt =  str.replace(re, ',');
                this.info = response.data;
                if(response.data.loanContinued === 0) {
                    this.continue = this.$t('approvalDetail.no')
                } else if(response.data.loanContinued === 1) {
                    this.continue = this.$t('approvalDetail.yes')
                }
            })
            //top20占比
            let percents = {};
            percents.userId = this.imgQuery.userId;
            percents.channel = this.collDetails.channel;
            percents.uuid = this.listObj.addressBookUuid;
            getPercent(percents)
            .then(response => {
                this.percent = response.data.percent;
            })
            //紧急联系人
            let contact = {};
            contact.orderId = this.orderId
            contact.msgType = this.lanStatus
            contact.userUUID = this.listObj.userUUID;
            getContact(contact)
            .then(response => {
                this.urgentContact = response.data;
            })
            
            //获取客服认证信息
            let obj = {};
            obj.userId = this.imgQuery.userId;
            obj.msgType = this.lanStatus;
            obj.userUUID = this.listObj.userUUID;
            obj.orderId = this.listObj.orderId;
            getCustomerInfo(obj) 
            .then(response => {
                response.data.loanCustomerInfo.workYears = response.data.loanCustomerInfo.workYears + this.$t('approvalDetail.year')
                this.perInfo.push(response.data.loanCustomerInfo)
                this.authentication.problem1 = this.perInfo[0].needMoney;
                this.authentication.problem2 = this.perInfo[0].moneyToDo;
            })
            //获取设备信息
            let appinfo = {};
            appinfo.userId = this.imgQuery.userId;
            appinfo.userUUID = this.listObj.addressBookUuid;
            getAppInfo(appinfo) 
            .then(response => {
                let obj = {};
                obj.phoneName = response.data.phoneBrand + response.data.phoneModels;
                obj.androidVersion = response.data.androidVersion;
                obj.installDate = response.data.installDate;
                obj.appVersion = response.data.appVersion;
                this.equipment.push(obj)
            })
            this.getParams();
            //审批结果回显
            let objs = {};
            objs.orderId = this.orderId
            objs.userUUID = this.listObj.userUUID;
            getApproInfo(objs) 
            .then(response => {
                this.ruleForm.telStatus = response.data.telStatus;
                this.ruleForm.checkOpinion = response.data.checkOpinion;
                if(response.data.checkFirstStatus === 1) {
                    this.ruleForm.status = this.$t('approvalDetail.adopt')
                } else if(response.data.checkFirstStatus === 2) {
                    this.ruleForm.status = this.$t('approvalDetail.refuse')
                } else if(response.data.checkFirstStatus === 3) {
                    this.ruleForm.status = this.$t('approvalDetail.derate')
                    this.isQuota = true;
                    let re = /(?=(?!\b)(\d{3})+$)/g;
                    let str = String(response.data.approvedAmt)
                    response.data.approvedAmt =  str.replace(re, ',');
                    this.ruleForm.approvedAmt = response.data.approvedAmt
                }
            })
            //电核回显
            let echoObj = {};
            echoObj.orderId = this.listObj.orderId;
            telephoneCheck(echoObj)
            .then(res => {
                if (res.data.myselfTelStatus === '1' || res.data.myselfTelStatus === '') {
                    this.isRemark1 = false;
                } else {
                    this.isRemark1 = true;
                }
                if (res.data.contact1TelStatus === '1' || res.data.contact1TelStatus === '') {
                    this.isRemark2 = false;
                } else {
                    this.isRemark2 = true;
                }
                if (res.data.contact2TelStatus === '1' || res.data.contact2TelStatus === '') {
                    this.isRemark3 = false;
                } else {
                    this.isRemark3 = true;
                }
                if (res.data.jobTelStatus === '1' || res.data.jobTelStatus === '') {
                    this.isRemark4 = false;
                } else {
                    this.isRemark4 = true;
                }
                this.ruleForm.myselfTelStatus = res.data.myselfTelStatus;
                this.ruleForm.myselfMobile = res.data.myselfMobile;
                this.ruleForm.myselfCheckRemarks = res.data.myselfCheckRemarks;
                this.ruleForm.contact1TelStatus = res.data.contact1TelStatus;
                this.ruleForm.contact1Mobile = res.data.contact1Mobile;
                this.ruleForm.contact1CheckRemarks = res.data.contact1CheckRemarks;
                this.ruleForm.contact2TelStatus = res.data.contact2TelStatus;
                this.ruleForm.contact2Mobile = res.data.contact2Mobile;
                this.ruleForm.contact2CheckRemarks = res.data.contact2CheckRemarks;
                this.ruleForm.jobTelStatus = res.data.jobTelStatus;
                this.ruleForm.jobMobile = res.data.jobMobile;
                this.ruleForm.jobCheckRemarks = res.data.jobCheckRemarks;
                this.ruleForm.sms = res.data.sms;
                this.ruleForm.alternateContact = res.data.alternateContact;
            })
        },
        computed: {
            ...mapGetters(["elements", "language", "collDetails"])
        },
        mounted () {
            this.viewer()
        },
        methods: {
            //查看风控报告
            seeRiskReport() {
                this.centerDialogVisible = true;
                let obj = {};
                obj.orderId = this.info.orderId;
                obj.mobile = this.info.phoneNo;
                obj.idNumber = this.info.cardNum;
                obj.userUUID = this.listObj.userUUID;
                riskReport(obj)
                .then(res => {
                    this.riskReportData = res.data
                })
            },
            viewer() {
                //获取图片
                let imgs = {};
                imgs.userId = this.imgQuery.userId;
                imgs.channel = this.imgQuery.channel;
                imgs.orderId = this.listObj.orderId;
                getImg(imgs) 
                .then(response => {
                    this.imgList = response.data.imgPathList
                    this.imgList.forEach(item => {
                        if(item.imageType === 1) {
                            this.img1.push(item)
                        } else if(item.imageType === 2) {
                            this.img1.push(item)
                        }else {
                            this.img2.push(item)
                        }
                    })
                    this.$nextTick(()=>{
                        const viewer = new Viewer(document.getElementById('image'));
                        const viewer2 = new Viewer(document.getElementById('image2'));
                    } )
                })
            },
            getParamsDetail () {
                this.listObj = this.collDetails;
                this.orderId = this.collDetails.orderId;
                this.imgQuery.userId = this.collDetails.userId;
                this.imgQuery.channel = this.collDetails.channel;
            },
            //查看认证结果
            seeResult () {
                let obj = {};
                obj.orderId = this.orderId;
                obj.msgType = this.lanStatus;
                getResultById(obj)
                .then(response => {
                    this.info.authMsg = response.data;
                })
            },
            //查看
            lookUp(row) {
                //命中
                let hit = {};
                hit.mobile = row.mobile;
                hit.userUUID = this.listObj.userUUID;
                getHit(hit) 
                .then(response => {
                    this.gridData.contactsName = row.contactsName;
                    this.gridData.mobile = row.mobile;
                    this.gridData.relation = row.relation;
                    switch(response.data.status) {
                        case '100':
                            this.gridData.status = this.$t('approvalDetail.registered')
                        break;
                        case '1':
                            this.gridData.status = this.$t('approvalDetail.audit')
                        break;
                        case '2':
                            this.gridData.status = this.$t('approvalDetail.credit')
                        break;
                        case '3':
                            this.gridData.status = this.$t('approvalDetail.repayments')
                        break;
                        case '4':
                            this.gridData.status = this.$t('approvalDetail.refused')
                        break;
                        case '5':
                            this.gridData.status = this.$t('approvalDetail.clear')
                        break;
                    }
                    this.dialogTableVisible = true;
                })
            },
            getParams () {
                this.userId = this.collDetails.userId;
                this.realName = this.collDetails.realName;
            }
        }
    }
</script>

<style scoped lang="scss">
input::-webkit-input-placeholder {
    font-size: 12px;
}
.approval-detail {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    position: relative;
}
.title {
  line-height: 30px;
  font-size: 16px;
  display: flex;
  padding-bottom: 10px;
  box-sizing: border-box;
  align-items: center;
  font-weight: bold;
}
.title:before{
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.el-table {
    z-index: 0;
}
.detail-info {
    font-size: 12px;
    .detail-info-item {
        line-height: 35px;
        span:nth-child(1) {
            margin-right: 5px;
            color: #616264;
        }
        span:nth-child(2) {
            color: #8a8a8c;
            display: inline-block;
            line-height: 20px;
        }
    }
    .contact-list {
        width: 90%;
        margin: 10px 5%;
    }
}

.id-photo {
    padding: 20px;
    box-sizing: border-box;
    #image, #image2 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    #image>div, #image2>div {
        width: 30%;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 3%;
        img {
            width: 100%;
        }
    }
}
.risk {
    font-size: 12px;
    .risk-item {
        padding: 20px 0 20px 28px;
        box-sizing: border-box;     
        button {
            padding: 0 20px;
            height: 28px;
            outline: none;
            border-width: 0;
            border-radius: 4px;
            font-size: 12px;
            background: #ebf5ff;
            color: #20a0ff;
            border: 1px solid #abd5ff;
            margin-left: 50px;
        }
    }
}
.basic {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #ebeef5;
    margin-bottom: 40px;
    .basic-title {
        height: 40px;
        line-height: 40px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        background: #ebeef5;
        padding-left: 28px;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: bold;
    }
    .optional {
        display: flex;
        font-size: 12px;
        .optional-item {
            flex: 1;
            padding: 10px 0 10px 10%;
            box-sizing: border-box;
            border-right: 1px solid #ebeef5;
            &:last-child {
                border: none;
            }
            &>div {
                line-height: 25px;
                span:nth-child(1) {
                    margin-right: 5px;
                    color: #616264;
                }
                span:nth-child(2) {
                    color: #8a8a8c;
                }
            }
        }
    }
}
.personal-opinion {
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    .personal-opinion-item {
        width: 100%;
        margin: 10px 0;
        display: flex;
        align-items: center;
        span {
            display: inline-block;
            width: 90px;
            text-align: right;
            font-size: 12px;
            font-weight: bold;
            margin-right: 15px;
            color: #616264;
        }
        div:nth-child(2), div:nth-child(4){
            width: 20%;
        }
        &:nth-child(2),
        &:nth-child(4),
        &:nth-child(6) {
            width: 100%;
            div:nth-child(2) {
                width: 80%;
            }
        }
        &:nth-child(3),
        &:nth-child(5) {
            width: 100%;
            div:nth-child(2) {
                width: 50%;
            }
        }
    }
}
.hit {
    color: red;
    &>a {
        position: absolute;
        right: 10px;
        color:#20a0ff;
        text-decoration: underline;
    }
}
.results {
    margin-left: 5px;
    color:#20a0ff;
    text-decoration: underline;
}
.custom-form {
    width: 100%;
    text-align: center;
    .thead {
        line-height: 45px;
        display: flex;
        font-weight: bold;
        &>div { 
            flex: 1;
            border-left: 1px solid #eee;
            border-top: 1px solid #eee;
            &:last-child {
                border-right: 1px solid #eee;
            }
        }
    }
    .tbody {
        line-height: 45px;
        display: flex;
        &>div { 
            flex: 1;
            border-left: 1px solid #eee;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            &:last-child {
                border-right: 1px solid #eee;
            }
        }
    }
}
.tab-title {
  line-height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.tab-title:before{
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.tab-title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tabs {
    margin-top: 10px;
}
.menu-title {
  width: 90%;
  height: 50px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-left: 5%;
  & > div {
    display: flex;
    align-items: center;
    font-size: 15px;
    span {
      width: 50%;
      padding-left: 10px;
      padding-right: 10px;
      text-align: right;
    }
  }
  .searchItem {
    width: 30%;
    margin-left: 2%;
    display: flex;
    justify-content: space-center;
    span {
      display: inline-block;
      width: 86px;
      text-align: right;
      font-size: 12px;
      font-weight: bold;
    }
    div:nth-child(2) {
      width: 116px;
    }
  }
  .searchItem-date {
    width: 32%;
  }
  .menu-title-btn {
    margin-left: 30px;
    button {
      padding: 0 20px;
      height: 28px;
      background: #20a0ff;
      color: #fff;
      outline: none;
      border-width: 0;
      margin-left: 15px;
      border-radius: 4px;
      font-size: 12px;
    }
  }
}
.tables {
  margin-left: 5%;
}
.pagination-container {
  width: 92%;
  margin-left: 4%;
  margin-bottom: 20px;
}
.topname {
    margin-bottom: 20px;
    font-weight: bold;
}
.addressList {
    width: 800px;
}
.continue>button {
    padding: 0 15px;
    height: 28px;
    line-height: 28px;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    background: #ebf5ff;
    color: #20a0ff;
    border: 1px solid #abd5ff;
    margin-left: 10px;
}
.loan-info {
    width: 100%;
    display: flex;
    padding: 10px 0;
    box-sizing: border-box;
    .loan-item {
        width: 30%;
        text-align: left;
        span:nth-child(1) {
            margin-right: 5px;
        }
    }
}
.href {
  border-bottom: 1px solid #000;
  cursor: pointer; 
  &:hover {
    color: #20a0ff;
    border-bottom: 1px solid #20a0ff;
  }
}
.back { 
    margin-top: 40px;
    margin-bottom: 80px;
    button {
        padding: 0 20px;
        height: 28px;
        background: #20a0ff;
        color: #fff;
        outline: none;
        border-width: 0;
        border-radius: 4px;
        font-size: 12px;
        &:nth-child(2) {
            margin-left: 10px;
            background: #ebf5ff;
            color: #20a0ff;
            border: 1px solid #abd5ff;
        }
    }
}
.risk-report {
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
    button {
        padding: 0 20px;
        height: 28px;
        outline: none;
        border-width: 0;
        border-radius: 4px;
        font-size: 12px;
        background: #ebf5ff;
        color: #20a0ff;
        border: 1px solid #abd5ff;
    }
}
.report-center {
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    .riskImg {
        width: 30%;
        img {
            width: 100%;
            height: 300px;
            border-radius: 8px;
        }
    }
    .risk-data {
        width: 70%;
        font-size: 12px;
        color: #8a8a8c;
        line-height: 18px;
        .risk-item {
            padding-left: 20px;
            margin: 10px 0;
        }
        .hight {
            display: inline-block;
            margin-right: 5px;
            color: #000;
        }
    }
}
.elec {
    font-size: 15px;
    font-weight: bold;
    margin-left: 30px;
    margin-bottom: 15px;
    color: #48576a;
}
</style>